<template>
  <div class="tableOfSubjects">
    <el-card class="box-Card">
      <el-form :inline="true" :model="form">
        <el-form-item label="学科编码">
          <el-input />
        </el-form-item>
        <el-form-item label="学科名称">
          <el-input />
        </el-form-item>
        <el-form-item label="创建者">
          <el-input />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button>清除</el-button>
        <el-button type="primary" @click="addClick">+新增学科</el-button>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="list" style="width: 100%">
        <el-table-column label="序号" width="80" type="index" />
        <el-table-column prop="rid" label="学科编码" />
        <el-table-column prop="name" label="学科名称" />
        <el-table-column prop="short_name" label="学科简称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="create_time" label="创建日期" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作">
          <!-- <template #footer> -->
          <el-button type="text" @click="editClick">编辑</el-button>
          <el-button type="text">禁止</el-button>
          <el-button type="text">删除</el-button>
          <!-- </template> -->
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        :current-page.sync="page.page"
        :page-sizes="[1, 10, 20, 30]"
        :page-size.sync="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getData"
        @current-change="getData"
      />
    </el-card>
    <Add ref="form" :initlist="initlist" />
  </div>
</template>

<script>
import Add from './components/add.vue'
import { subjectListAPI } from '@/api/subject'
export default {
  components: { Add },
  data() {
    return {
      value: '',
      list: [{}], // 渲染列表
      total: 22, // 页面总条数
      initlist: [],
      page: {
        page: 1, // 当前条数
        limit: 10 // 每页显示个数 ||  页尺寸
      },
      form: {
        // id: '', // 576
        rid: '', // "学科编码"
        name: '', // "学科名称"
        short_name: '', // "学科简称"
        status: '', // 状态码
        create_time: '', // "创建日期"
        username: '' // "创建者"
        // name: '', // 学科名称
        // rid: '', // 学科编码
        // username: '', // 创建者
        // stauts: '' // 状态
      },
      options: [
        {
          value: '选项1',
          label: '禁用'
        },
        {
          value: '选项2',
          label: '启用'
        }
      ]
    }
  },

  created() {
    this.getData()
  },
  methods: {
    // 布局
    async getData() {
      const res = await subjectListAPI(this.page)
      this.list = res.data.items
      this.total = res.data.pagination.total
      // console.log('总条数', res.data.pagination.total)
      console.log('学科列表信息', res)
    },
    // 添加弹框
    addClick() {
      this.$refs.form.addShow = true // 打开弹框
      this.$refs.form.mode = 'add' // 修改弹框应用场景
    },
    // 编辑弹框
    editClick() {
      this.$refs.form.addShow = true // 打开弹框
      this.$refs.form.mode = 'edit' // 修改弹框应用场景
    }
  }
}
</script>

<style lang="scss" scoped>
.tableOfSubjects {
  padding: 15px;
  .box-Card {
    margin-bottom: 10px;
  }
  .page {
    text-align: center;
    margin-top: 10px;
  }
  // 卡片1字体粗细
  ::v-deep .el-form-item__label {
    font-weight: normal;
  }
  // 前3个input框的宽度
  .el-input {
    width: 150px;
  }
  // select下拉框的宽度
  ::v-deep .el-input--suffix {
    width: 217px;
  }
}
</style>
